<template>
    <div class="background">
        <div class="form-class box">
            <div class="left">
                <div>无忧家政管理后台</div>
                <img src="../assets/logo.png" style="height: 200px;width: 200px" alt="">
            </div>
            <div class="right">
                <span>欢迎登录</span>
                    <el-form v-model="loginForm" status-icon ref="loginForm" label-width="60px">
                        <el-form-item label="账号" prop="managerName">
                            <el-input type="text" v-model="loginForm.managerName"  class="el-input"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input type="password" v-model="loginForm.password"  class="el-input"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="login" >登录</el-button>
                            <el-button @click="reset">重置</el-button>
                        </el-form-item>
                    </el-form>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "login",
        data(){
            return{
                //表单对象
                loginForm:{
                    managerName:'',
                    password:''
                }
            }
        },
        created() {

        },
        methods:{
            login() {
                var that=this;
                var managerName=this.loginForm.managerName;
                var password=this.loginForm.password;
                this.$ajax.post('/jz/manager/login/?managerName='+managerName+'&password='+password).then(function (resp) {
                    //console.log(resp);
                    if(resp.data.msg==='200'){
                        that.$cookie.set('managerName',managerName);
                        that.$message({
                            type:"success",
                            message:'登录成功！欢迎您，'+managerName});
                        that.$router.push({
                            path: '/index'
                        })
                    } else {
                        alert('账号或密码不对，请重新登录！');
                        window.location.reload();
                    }
                })
            },
            reset() {
                window.location.reload();
            }
        }
    }
</script>

<style scoped>
.form-class{
    width: 30%;
    margin:200px 550px auto;
}

.background {
    background-image: linear-gradient(to right, #01B8AF, #018DB4);
    height: 730px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.box {
    border-radius: 10px;
    height: 400px;
    width: 600px;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    box-shadow: 1px 1px 10px rgb(104, 104, 104);
}

.left {
    width: 40%;
    background-color: rgb(247, 247, 247);
    color: #018DB4;
    font-size: large;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.right {
    width: 60%;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.right span {
    font-size: x-large;
    margin: 80px auto 30px auto;
}

.el-input {
    width: 100%;
    margin-bottom: 20px;
}
</style>
